<template>
  <div class="row">
    <div class="col-md-6">
      <h3>数据列表</h3>
      <table class="table table-hover">
        <thead>
          <tr >
            <th>名称</th>
            <th>用户</th>
            <th>文件</th>
            <th>内容</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, idx) in audio_list" :key="item.url">
            <td>{{item.name}}</td>
            <td>{{item.user}}</td>
            <td>{{item.file}}</td>
            <td>{{item.content}}</td>
            <td>
              <button @click="deleteRow(item)" :data-idx = "idx" class="btn btn-danger" style="margin: 0% 10%;">
                <i class="glyphicon glyphicon-pencil">删除</i>
              </button>
              <button @click="editRow(item)" :data-idx = "idx" class="btn btn-success">
                <i class="glyphicon glyphicon-remove">编辑</i>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="col-md-4">
      <h3>操作数据</h3>
      <hr>
      <input type="hidden" v-model="audio.url">
      <div class="form-group">
        <label for="name">名称: </label>
        <input type="text" id="name" class="form-control" v-model="audio.name">
      </div>
      <div class="form-group">
        <label for="user">用户: </label>
        <input type="text" id="user" class="form-control" v-model="audio.user">
      </div>
      <div class="form-group">
        <label for="file">文件: </label>
        <input type="text" id="file" class="form-control" v-model="audio.file">
      </div>
      <div class="form-group">
        <label for="content">内容: </label>
        <input type="text" id="content" class="form-control" v-model="audio.content">
      </div>
      <div>
        <button class="btn btn-default" v-on:click="saveRow">确定</button>
      </div>
    </div>  
  </div>

</template>

<script>
import axios from 'axios'
import {onMounted, reactive, toRefs} from 'vue'

export default {
  setup() {
    let base_url = "http://127.0.0.1:8000/api/test/"
    const audio_blank = {url:'', name:'', user:'', file:'',content:'', }
    const state = reactive({
      audio_list: [],
      audio: Object.assign({}, audio_blank)
    })

    const getAudioList = ()=>{
      axios.get(base_url).then(res=>{
        state.audio_list = res.data;
        state.audio = Object.assign({}, audio_blank)
      }).catch(err=>{
        console.log(err);
      })
    }

    const editRow = (item)=>{
      state.audio.url = item.url
      state.audio.name = item.name;
      state.audio.user = item.user;
      state.audio.file = item.file;
      state.audio.content = item.content;
    }

    const saveRow = ()=>{
      let newRow = {
        name: state.audio.name,
        user: state.audio.user,
        file: state.audio.file,
        content: state.audio.content,
      }
      if(state.audio.url==""){
        //新增
        console.log("新增")
        axios.post(base_url, newRow).then(()=>{
          getAudioList();
        }).catch(err=>{
          console.log(err);
      })
      }else{
        console.log("编辑")
        //编辑
        axios.put(state.audio.url, newRow).then(()=>{
          getAudioList();
        }).catch(err=>{
          console.log(err)
        })
      }
    }
    
    const deleteRow = (item)=>{
      axios.delete(item.url).then(()=>{
        getAudioList();
      }).catch(err=>{
        console.log(err);
      })
    }

    onMounted(()=>{
      getAudioList();
    })
    return{
      ...toRefs(state),
      editRow,
      saveRow,
      deleteRow
    }
  },
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
</style>
